---
import { getSidebarConfig } from '../content/config'
import { getSidebar } from '../utils/navigation'
import SidebarSublist from './SidebarSublist.astro'
import { SideNavLinks } from './menu/SideNavLinks'

const PUBLIC_WEB_URL = (
  import.meta.env.PUBLIC_WEB_URL || 'https://daytona.io'
).replace(/\/$/, '')
---

<SidebarSublist
  sublist={getSidebar(
    getSidebarConfig(Astro.props.lang, Astro.props.labels),
    Astro.url.pathname
  )}
/>
<div class="navbar-links">
  <a href={import.meta.env.BASE_URL}
    >{Astro.props.labels['header.documentation']}
  </a>
  <a href={`${PUBLIC_WEB_URL}/customers`}
    >{Astro.props.labels['header.customers']}
  </a>
  <a href={`${PUBLIC_WEB_URL}/pricing`}
    >{Astro.props.labels['header.pricing']}
  </a>
  <a href={`${PUBLIC_WEB_URL}/startups`}
    >{Astro.props.labels['header.startups']}
  </a>
  <a href={`${PUBLIC_WEB_URL}/blog`}>{Astro.props.labels['header.blog']} </a>
</div>
<div class="mobile-nav-btn nav__items_side_menu">
  <SideNavLinks client:load locale={Astro.props.lang} />
</div>

<style>
  .navbar-links {
    display: none;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;

    @media (max-width: 1024px) {
      display: flex;
    }
  }

  .navbar-links a {
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Berkeley Mono', monospace;
    color: var(--primary-text-color);
    transition: all 0.2s;
    font-weight: 400;
    letter-spacing: -0.01rem;
    &:hover {
      color: var(--hover-color);
    }
  }
</style>
